<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="100px"  ref="formInline" slot="form" v-collapse="true" :rules="rules">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="fProvinceId">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="用户名">
                            <el-input v-model="formInline.agentName" placeholder="请输入内容" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="负责人" prop="loginNum">
                            <el-input v-model="formInline.agentOwner" placeholder="请输入内容" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="审核状态">
                            <el-select v-model="formInline.status" style="width:100%" >
                                <el-option v-for="item in examStatus" :key="item.orgId" :label="item.statusName" :value="item.orgId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>                    
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
 
            <div class="table-title" slot="table-title"></div>
            
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
 
                <el-table-column label="经销商（用户名）" align="center"  prop="schoolName" width="170">
                    <template scope="scope">
                        <span>{{scope.row.agentName | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="经销商（负责人）" align="center" prop="schoolType" width="170">
                    <template scope="scope">
                        <span>{{scope.row.agentOwner | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column label="学校名称" align="center" prop="belongToArea" width="170">
                    <template scope="scope">
                        <span>{{scope.row.schoolName | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="会员月数" align="center" prop="detail" width="80">
                    <template scope="scope">
                        <span>{{scope.row.vipMonth | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="单价￥" align="center" prop="createTime">
                    <template scope="scope">
                        <span>{{scope.row.unitPrice | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="购买个数" prop="creatorName">
                    <template scope="scope">
                        <span>{{scope.row.buyNum | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="分成比例" align="center">
                    <template scope="scope">
                        <span>{{scope.row.dividedPercentage | isNull}}</span>
                    </template>               
                </el-table-column>
                
                <el-table-column align="center" label="应付金额￥">
                    <template scope="scope">
                        <span>{{scope.row.amountPayable | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="实付金额￥">
                    <template scope="scope">
                        <span>{{scope.row.amountPayment | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="申请时间" width="170">
                    <template scope="scope">
                        <span>{{scope.row.applyTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="审核时间" width="170">
                    <template scope="scope">
                        <span>{{scope.row.checkTime | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column align="left" label="其他操作" width="120">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" v-if="scope.row.status=='0'" @click="exam(scope.row.codeId)">审核</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status=='1'" @click="check(scope.row.codeId)">查看</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status=='2'" @click="reason(scope.row.codeId)">驳回原因</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="+listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <el-dialog title="审核" :visible.sync="dialogFormVisible" size="tiny" :before-close="handleClose">
            <el-form label-width="80px" class="dialogForm" ref="dialogForm" :model="dialogForm" :rules="rules">
                <el-row class='radio-box'>
                    <el-col :span='15' :offset='9'>
                        <el-radio-group v-model="radio" @change='changeRadio'>
                            <el-radio class="radio" label="1">同意</el-radio>
                            <el-radio class="radio radioCol" label="2">驳回</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row v-if='radio=="2"'>
                    <el-col :span='20' :offset="1">
                        <div>
                            <el-form-item prop='excuse' label="驳回原因">
                                <el-popover placement="top-start" trigger="focus" content="字符长度不大于50个">
                                    <el-input v-model="dialogForm.excuse"  type="textarea" :rows="6" placeholder="请输入驳回原因" slot="reference" :maxlength="50"></el-input>
                                </el-popover>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="gbExam">取消</el-button>
                <el-button type="primary" @click="checkExam('dialogForm')" :loading="loadingBtn">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="查看原因" :visible.sync="dialogFormVisible2" size="tiny">
            <div class='checkReson'>
                {{reasonContent}}
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible2=false">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
 
<script>
import { pageActivationCode, checkActivationCode, getRejectReason} from 'api/memberMangement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
 
export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisible2: false,
            reasonContent: '',
            reasonId: '',
            dialogForm: {},
            loadingBtn: false,
            formInline: {// form表单数据
                agentName: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                status: '',
                schoolId: '',
                schoolName: '',
                agentOwner: ''
            },
            radio: '1',
            examStatus: [
                {
                    orgId: '',
                    statusName: '请选择'
                },
                {
                    orgId: '0',
                    statusName: '审核中'
                },
                {
                    orgId: '2',
                    statusName: '已驳回'
                },
                {
                    orgId: '1',
                    statusName: '已通过'
                }
            ],
            dialog: {
                dialogFormVisible: false,
                pid: ''
            },
            checked: true,
            dataApply: [{}],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                excuse: [
                    { required: true, message: '请输入驳回原因', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ]
            },
            loading: false,
            multipleSelection: []
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
        // this.getSchoolType();
    },
    filters: {
        filterCreateTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            } else {
                return '--'
            }
        }
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询学校类型
        getSchoolType() {
            querySchoolType().then(response => {
                let schoolType = response.data.content;
                let select = {
                    typeName: '请选择',
                    schoolTypeId: ''
                }
                schoolType.unshift(select);
                this.formInline.dataType = schoolType;
            });
        },
        changeRadio(a) {
            this.dialogForm.excuse = '';
        },
        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            pageActivationCode(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId, this.formInline.schoolId, this.formInline.agentName, this.formInline.agentOwner, this.formInline.status).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        // 表单查询
        onSubmit() {
            this.$refs['formInline'].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        exam(id) {
            this.dialogFormVisible = true;
            this.reasonId = id;
        },
        checkExam(dialogForm) {
            this.$refs[dialogForm].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true;
                    checkActivationCode(this.reasonId, this.radio, this.dialogForm.excuse).then(res => {
                        this.loadingBtn = false;
                        this.searchFetchData();
                        this.$message.success('操作成功');
                        this.dialogForm.excuse = '';
                        this.radio = '1';
                    }).catch(() => {
                        this.loadingBtn = false;
                    })
                    this.dialogFormVisible = false;
                }
            })
        },
        gbExam() {
            this.dialogFormVisible = false;
            this.dialogForm.excuse = '';
            this.radio = '1';
        },
        handleClose() {
            this.dialogFormVisible = false;
            this.dialogForm.excuse = '';
            this.radio = '1';
        },
        reason(id) {
            this.dialogFormVisible2 = true;
            getRejectReason(id).then(res => {
                this.reasonContent = res.data.content.reason;
            })
        },
        check(row) {
            this.$router.push({path: `checkCode/${row}`});
        }
 
    }
}
</script>
<style lang="scss" scoped>
 
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
            margin-left:5px;
            background:#f9f9f9;
            color:#444;
        }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialogForm{
        padding:15px 0 0 0 !important;
    }
    .dialog-footer{
        .el-button{
            margin-top: 25px;
        }
        text-align: center;
    }
    .radioCol{
        margin-left:35px !important;
    }
    .radio-box{
        margin-bottom:30px;
    }
    .checkReson{
        padding:50px 100px;
    }
}
</style>